import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd'
import DevSeason from './components/DevSeason'
import PresetAttr from './components/PresetAttr'
import Color from './components/Color'
import SizeLibrary from './components/SizeLibrary'
import FabricType from './components/FabricType'
import GoodsInfoTemplate from './components/GoodsInfoTemplate'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useAppSelector } from '@/store/hooks'
const Index: React.FC = () => {
  const buttonCodeList = useAppSelector((state) => state.login.buttonCodeList) || []
  const [menuItems, setmenuItems] = useState<{ key: string; label: string; children: React.ReactNode }[]>([])
  const [defaultKey, setdefaultKey] = useState('')
  const [query] = useSearchParams()
  const navigate = useNavigate()
  useEffect(() => {
    const items: { key: string; label: string; children: React.ReactNode }[] = []
    if (buttonCodeList.includes('colorLibrary')) {
      items.push({
        key: 'colorLibrary',
        label: '颜色库',
        children: <Color />,
      })
      setdefaultKey('colorLibrary')
    }
    if (buttonCodeList.includes('sizeLibrary')) {
      items.length === 0 && setdefaultKey('sizeLibrary')
      items.push({
        key: 'sizeLibrary',
        label: '尺码库',
        children: <SizeLibrary />,
      })
    }
    if (buttonCodeList.includes('fabricType')) {
      items.length === 0 && setdefaultKey('fabricType')
      items.push({
        key: 'fabricType',
        label: '面种库',
        children: <FabricType />,
      })
    }
    if (buttonCodeList.includes('devSeason')) {
      items.length === 0 && setdefaultKey('devSeason')
      items.push({
        key: 'devSeason',
        label: '开发季',
        children: <DevSeason />,
      })
    }
    if (buttonCodeList.includes('spuConfig')) {
      items.length === 0 && setdefaultKey('spuConfig')
      items.push({
        key: 'spuConfig',
        label: '商品预设属性',
        children: <PresetAttr />,
      })
    }
    if (buttonCodeList.includes('goodsInfoTemplate')) {
      items.length === 0 && setdefaultKey('goodsInfoTemplate')
      items.push({
        key: 'goodsInfoTemplate',
        label: '商品信息模板',
        children: <GoodsInfoTemplate />,
      })
    }
    if (items.length === 0) {
      navigate('/403', { replace: true })
      return
    }
    setmenuItems(items)
    const type = query.get('type') || ''
    if (type) {
      setdefaultKey(type)
    }
  }, [])
  return <Tabs activeKey={defaultKey} items={menuItems} onChange={(key) => setdefaultKey(key)}></Tabs>
}

export default Index
